<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <EditButton @click="openDialog"></EditButton>
      </el-col>
    </el-row>

    <el-dialog
        title="广告修改"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogVisible = false">
      <el-form label-width="70px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="bannerForm.title"></el-input>
        </el-form-item>
        <el-form-item label="图片上传" prop="file">
          <input type="file" @change="getFile">
        </el-form-item>
        <el-form-item label="原图预览">
          <img :src="bannerForm['pictureUrl']" alt="预览图" class="banner_image">
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBanner">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * @author 太阳当空丶赵
 * @date 2023/1/4-17:06
 * @version 1.0.0
 */
import {baseUrl} from "@/utils/requests/requests"
import {changeBanner} from '@/network/applet'
import EditButton from "@/components/common/buttons/Edit"
export default {
  name:"AddBanner",
  components: {EditButton},
  data(){
    return {
      addDialogVisible: false,
      baseUrl,
      bannerForm: {},
    }
  },
  props: ["bannerInfo"],
  methods:{
    async addBanner() {
      // 添加banner
      const {title,file,id} = this.bannerForm
      const result = await changeBanner(id,title,file)
      if (result.code !== 200) return this.alertMessage(result.msg,"error")
      this.addDialogVisible = false
      return this.$emit("change")
    },
    getFile(event){
      // console.log(event)
      this.bannerForm['file'] = event.target.files[0]
      this.bannerForm['pictureUrl'] = URL.createObjectURL(event.target.files[0])
    },
    openDialog(){
      this.addDialogVisible = true
      const {bannerInfo} = this
      this.bannerForm = JSON.parse(JSON.stringify(bannerInfo))
    }
  }
}
</script>
<style scoped>
.banner_image{
  width: 120px;
  aspect-ratio: 1;
}
</style>
